<template>
  <view class="container">
    <!-- 顶部导航 -->
    <uni-segmented-control
      :current="currentViewIndex"
      :values="['日视图', '周视图']"
      @clickItem="onSwitchView"
      styleType="text"
      activeColor="#66ccff"
    />

    <!-- 日期选择 -->
    <scroll-view 
      scroll-x 
      class="dates-scroll" 
      show-scrollbar="false" 
      :scroll-into-view="'date-' + activeIndex"
    >
      <view class="dates">
        <uni-card
          v-for="(date, index) in dates"
          :key="index"
          :id="'date-' + index"
          :is-shadow="true"
          :class="['date-card', { active: index === activeIndex }]"
          @click="setActive(index)"
        >
          <view class="date-content">
            <text class="day">{{ getDayOfWeek(date) }}</text>
            <text class="date">{{ getDate(date) }}</text>
          </view>
        </uni-card>
      </view>
    </scroll-view>

    <!-- 设备状态卡片 -->
    <uni-row>
      <uni-col :span="12">
        <uni-card :is-shadow="true" class="status-card">
          <view class="status-content">
            <uni-icons custom-prefix="iconfont" type="icon-heart-rate" size="30" color="#ff" />
            <view class="status-info">
              <text class="status-text">心率正常</text>
              <text class="status-value">72 BPM</text>
            </view>
          </view>
        </uni-card>
      </uni-col>
      <uni-col :span="12">
        <uni-card :is-shadow="true" class="status-card">
          <view class="status-content">
            <uni-icons custom-prefix="iconfont" type="icon-fall" size="30" color="#007AFF" />
            <view class="status-info">
              <text class="status-text">跌倒</text>
              <text class="status-value">0 次</text>
            </view>
          </view>
        </uni-card>
      </uni-col>
    </uni-row>

    <!-- 事件卡片 -->
    <view class="event-list">
      <view class="event-item" v-for="(event, index) in events" :key="index">
        <uni-card :is-shadow="true" class="event-card">
          <view class="event-content">
            <view class="event-info">
              <text class="event-time">{{ event.time }}</text>
              <text class="event-description">{{ event.description }}</text>
            </view>
            <text class="event-device">{{ event.device }}</text>
            <uni-icons type="more-filled" size="24" color="#999" />
          </view>
        </uni-card>
      </view>
    </view>
  </view>
</template>

<script>
import { ref, reactive } from 'vue'

export default {
  setup() {
    const currentViewIndex = ref(0)
    const dates = reactive([
      new Date(2023, 4, 20),
      new Date(2023, 4, 21),
      new Date(2023, 4, 22),
      new Date(2023, 4, 23),
      new Date(2023, 4, 24)
    ])
    const activeIndex = ref(2)
    const events = reactive([
      { time: '今天 08:08', description: '摔倒', device: '摄像头一' },
      { time: '今天 09:15', description: '心率异常', device: '摄像头二' },
      // 更多事件数据
    ])

    const onSwitchView = (e) => {
      currentViewIndex.value = e.currentIndex
    }

    const setActive = (index) => {
      activeIndex.value = index
    }

    const getDayOfWeek = (date) => {
      const days = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']
      return days[date.getDay()]
    }

    const getDate = (date) => {
      return date.getDate()
    }

    return {
      currentViewIndex,
      dates,
      activeIndex,
      events,
      onSwitchView,
      setActive,
      getDayOfWeek,
      getDate
    }
  }
}
</script>

<style lang="scss" scoped>
$padding: 20rpx;
$background-color: #f8f8f8;
$active-color: #007AFF;
$text-color: #333;
$secondary-text-color: #666;
$device-text-color: #999;
$card-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

.container {
  padding: $padding;
  background-color: $background-color;
  min-height: 100vh;
}

.dates-scroll {
  margin: 24rpx 0;
  white-space: nowrap;
}

.dates {
  display: inline-flex;
  padding: 0 8rpx;
}

.date-card {
  width: 100rpx;
  height: 120rpx;
  margin-right: 12rpx;
  border-radius: 16rpx;
  background-color: #fff;
  transition: all 0.3s ease;
  box-shadow: $card-shadow;

  &.active {
    background-color: $active-color;
    transform: scale(1.05);

    .day,
    .date {
      color: #fff;
    }
  }
}

.date-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.day {
  font-size: 22rpx;
  color: $secondary-text-color;
  margin-bottom: 6rpx;
}

.date {
  font-size: 32rpx;
  font-weight: bold;
  color: $text-color;
}

.event-list {
  display: flex;
  flex-direction: column;
}

.event-item {
  width: 100%;
}

.status-card {
  padding: 16rpx;
  margin-bottom: 16rpx;
  box-shadow: $card-shadow;
}

.status-content {
  display: flex;
  align-items: center;
}

.status-info {
  margin-left: 12rpx;
}

.status-text {
  font-size: 24rpx;
  color: $secondary-text-color;
  margin-bottom: 2rpx;
}

.status-value {
  font-size: 28rpx;
  font-weight: bold;
  color: $text-color;
}

.event-card {
  padding: 0rpx;
  margin-bottom: 12rpx;
  box-shadow: $card-shadow;
}

.event-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.event-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.event-time {
  font-size: 20rpx;
  color: $secondary-text-color;
  margin-bottom: 2rpx;
}

.event-description {
  font-size: 24rpx;
  font-weight: bold;
  color: $text-color;
}

.event-device {
  font-size: 20rpx;
  color: $device-text-color;
  margin-right: 12rpx;
}

.uni-segmented-control {
  margin-bottom: 20rpx;
}

.uni-row {
  margin-bottom: 20rpx;
}
</style>